import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-angular-day2-selector',
  templateUrl: './angular-day2.component.html',
  styleUrl: './angular-day2.component.css'
})

export class AngularDay2Component implements OnInit {
  title = 'AngularDay2';
  colorList: Array<string> = ['red', 'green', 'purple', 'yellow'];

  type: number = 5;
  ngOnInit(): void {}

  // 将Event事件传递给函数，并打印出来
  clickFun(e:Event){
    console.log(e);
    alert("You click the button!")
  }

  // 使用any可将input进来的value的值输出
  inputFun(e:any){
    console.log(e.target.value);
  }

  clickAndAletFun(e:string){
    alert(e)
  }

  docTitle:string = '';

  age : FormControl = new FormControl('');

  updateAgeValue(){
    // this 可以调用当前组件中的其他变量，例如前面titile & docTite & age ，但是type: number 这种不能直接调用
    // 此处age是 FormControl 对象，必须用setValue()才能设置其值，不能用直接赋值的方式。
    this.age.setValue(18);
  }

  loginForm: FormGroup = new FormGroup({
    userName: new FormControl(''),
    password: new FormControl('')
  });

  printLoginInfo(){
    console.log(this.loginForm.value);
  }
}
